<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Updated WASM Interface Test (With Example Comparison)</title>
</head>
<body>
<h1>Updated WASM Interface Test (With Example Comparison)</h1>
<pre id="output"></pre>

<script>
    async function loadAndRunWasm() {
        const importObject = {
            env: {
                // Add any required environment functions here
            }
        };

        try {
            const response = await fetch('interface.wasm');
            const bytes = await response.arrayBuffer();
            const { instance } = await WebAssembly.instantiate(bytes, importObject);

            const {
                batch_size,
                input_dim,
                output_dim,
                set_input,
                get_output,
                evaluate,
                example_batch_size,
                get_example_input,
                get_example_output,
                test
            } = instance.exports;

            const batchSize = batch_size();
            const inputDim = input_dim();
            const outputDim = output_dim();
            const exampleBatchSize = example_batch_size();

            const testDeviation = test()
            console.log(`Test deviation: ${testDeviation}`);

            console.log(`Batch size: ${batchSize}`);
            console.log(`Input dimension: ${inputDim}`);
            console.log(`Output dimension: ${outputDim}`);
            console.log(`Example batch size: ${exampleBatchSize}`);

            let displayText = `
Batch size: ${batchSize}
Input dimension: ${inputDim}
Output dimension: ${outputDim}
Example batch size: ${exampleBatchSize}

Random Input Evaluation:
`;

            // Part 1: Evaluate with random input
            const randomInput = Array.from({ length: batchSize }, () =>
                Array.from({ length: inputDim }, () => Math.random() * 2 - 1)
            );

            for (let b = 0; b < batchSize; b++) {
                for (let i = 0; i < inputDim; i++) {
                    set_input(b, i, randomInput[b][i]);
                }
            }

            evaluate();

            const randomOutput = Array.from({ length: batchSize }, (_, b) =>
                Array.from({ length: outputDim }, (_, i) => get_output(b, i))
            );

            for (let b = 0; b < batchSize; b++) {
                displayText += `
Batch ${b}:
  Input: ${randomInput[b].join(', ')}
  Output: ${randomOutput[b].join(', ')}
`;
            }

            // Part 2: Evaluate with example input and compare
            displayText += `

Example Input Evaluation:
`;

            for (let b = 0; b < exampleBatchSize; b++) {
                const exampleInput = Array.from({ length: inputDim }, (_, i) => get_example_input(b, i));

                for (let i = 0; i < inputDim; i++) {
                    set_input(0, i, exampleInput[i]);
                }

                evaluate();

                const modelOutput = Array.from({ length: outputDim }, (_, i) => get_output(0, i));
                const exampleOutput = Array.from({ length: outputDim }, (_, i) => get_example_output(b, i));

                const absoluteDifference = modelOutput.map((val, i) => Math.abs(val - exampleOutput[i]));

                displayText += `
Batch ${b}:
  Input: ${exampleInput.join(', ')}
  Model Output: ${modelOutput.join(', ')}
  Example Output: ${exampleOutput.join(', ')}
  Absolute Difference: ${absoluteDifference.join(', ')}
`;
            }

            document.getElementById('output').textContent = displayText;

        } catch (error) {
            console.error('Error:', error);
            document.getElementById('output').textContent = `Error: ${error.message}`;
        }
    }

    loadAndRunWasm();
</script>
</body>
</html>

